<template>
  <div>
    <h1>ref</h1>
    <ul>
      <li ref="liOneRef">第一个li</li>
    </ul>
    <ChlidCom ref="childRef"></ChlidCom>
    <button @click="childAaa11">获取子组件</button>
    <ul>
      <li :ref="getList" v-for="index in 10" :key="index">
        这是第{{ index }}li
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import ChlidCom from './components/ChildCom.vue';

export default defineComponent({
  components: { ChlidCom },
  setup() {
    const liOneRef = ref<HTMLElement | null>();
    console.log(liOneRef);

    const childRef = ref<InstanceType<typeof ChlidCom>>();
    console.log(childRef);

    const childAaa11 = () => {
      console.log(childRef.value?.childAaa);
      console.log(childRef.value?.aa);


    };
    const getDOM: HTMLElement[] = [];
    const getList = (el: HTMLElement) => {
      getDOM.push(el);
    }
    console.log(getDOM);

    return {
      liOneRef,
      childRef,
      childAaa11,
      getList,
    };
  },
  // mounted() {
  //   // console.log(this.$refs.liOneRef);
  // },
});
</script>

<style scoped>

</style>
